<template>
  <el-form :model="loginInfo" :rules="rules2" ref="loginInfo" label-position="left" label-width="0px" class="demo-ruleForm login-container">
    <h3 class="title">系统登录</h3>
    <el-form-item prop="username">
      <el-input type="text" v-model="loginInfo.username" auto-complete="off" placeholder="账号"></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input type="password" v-model="loginInfo.password" auto-complete="off" placeholder="密码"></el-input>
    </el-form-item>
    <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
    <el-form-item style="width:100%;">
      <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining">登录</el-button>
      <!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
    </el-form-item>

    <el-form-item style="width:100%;">
      <el-button type="danger" style="width:100%;" @click.native.prevent="shopRegisterSubmit" :loading="logining">商铺注册</el-button>
      <!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
    </el-form-item>
  </el-form>
</template>

<script>
  import { requestLogin } from '../api/api';
  //import NProgress from 'nprogress'
  export default {

    data() {
      return {
        logining: false,
        loginInfo: {
          username: '',
          password: '',
          type: 0
        },
        rules2: {
          username: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            //{ validator: validaePass }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            //{ validator: validaePass2 }
          ]
        },
        checked: true
      };
    },
    methods: {
      shopRegisterSubmit(){
        this.$router.push({ path: '/shopregister' });
      },
      handleReset2() {
        this.$refs.loginInfo.resetFields();
      },
      handleSubmit2() {
        this.$refs.loginInfo.validate((valid) => {
          if (valid) {
            this.logining = true;
            alert(11)
             this.$http.post("login",this.loginInfo).then(res => {
               this.logining = false;//NProgress.done();
               if(res.data.success){
                 //一样的 只是用了封装的方法 带东西进路由
                 //将获取的map 通过数据 分开
                 let { username, password, token, oldTime,menus,permissions} = res.data.resultObj;
                 console.log(token);
                 console.log(res);
                 //这步获取过来它的map中的许ii昂
                 let {logininfo} = res.data.resultObj;
                 //这步将获取来的token存在localStorge
                 //我以为这两步会把这个东西放进去 看来是我天真了
                 //这个对象解析不出来
                 console.log(logininfo)
                 //还得是用这个来解析
                 console.log(JSON.stringify(logininfo))
                 this.loginInfo.username=username;
                 this.loginInfo.password=password;
                 localStorage.setItem("Utoken",token);
                 localStorage.setItem("OldTime",oldTime);
                 localStorage.setItem("logininfo",JSON.stringify(logininfo));//这步是将后端获取的数据表单 存在这个localStorge中
                 //拿到的是一个对象，需要转成json格式字符串
                 localStorage.setItem("menus",JSON.stringify(menus));
                 localStorage.setItem("permissions",JSON.stringify(permissions));
                 this.login();
               }else{
                 alert(res.data.message)
               }
            }).catch(error => {
               alert(res.data.message)
             })
          }
        });
      },
      login(){
         this.$http.post("login",this.loginInfo).then(res=>{
           alert(957)
           console.log(res)
             if(res.data.success){
               console.log(localStorage.getItem("Utoken"));
               this.$router.push({path: '/echarts'});
               location.reload();
             }else {
               alert(res.data.message)
             }
           }).catch(error => {
             console.log(res)
           })
      },
    }
          // this.$http.post("login",localStorage.getItem("logininfo"),{
          //   headers: { 'Content-Type': 'application/json' }
          // }).then(res=>{
          //     if(res.data.success){
          //       this.$router.push({path: '/echarts'});
          //     }else {
          //       alert(res.data.message)
          //     }
          // }).catch(error => {
          //   alert(error.message)
          // })

  }

</script>

<style lang="scss" scoped>
  .login-container {
    /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
    .title {
      margin: 0px auto 40px auto;
      text-align: center;
      color: #505458;
    }
    .remember {
      margin: 0px 0px 35px 0px;
    }
  }
</style>